<app-toolbar>
    <app-search-form placeholder="请输入名称"
        (onSearch)="search($event)"></app-search-form>
    <app-batch-btn [showExportBtn]="false"
        [showImportBtn]="false"
        (add)="handleEdit()"
        (batchDel)="handleBatchDel()"></app-batch-btn>
</app-toolbar>

<ng-template #totalTemplate
    let-total>总共 {{ total }} 条</ng-template>
<nz-table #basicTable
    [nzData]="datum"
    [nzLoading]="loading"
    [nzScroll]="getTableHeight()"
    nzShowPagination
    nzShowSizeChanger
    [nzFrontPagination]="false"
    [nzTotal]="total"
    [nzShowTotal]="totalTemplate"
    (nzPageSizeChange)="pageSizeChange($event)"
    (nzPageIndexChange)="pageIndexChange($event)"
    [nzPageSize]="pageSize"
    [nzPageIndex]="pageIndex"
    (nzQueryParams)="onQuery($event)">
    <thead>
        <tr>
            <th [nzChecked]="checked"
                [nzIndeterminate]="indeterminate"
                (nzCheckedChange)="handleAllChecked($event)"></th>
            <th nzColumnKey="id"
                [nzSortFn]="true">ID</th>
            <th nzColumnKey="name"
                [nzSortFn]="true">名称</th>
            <th nzColumnKey="username"
                [nzSortFn]="true">用户名</th>
            <th nzColumnKey="password">密码</th>
            <th nzColumnKey="desc">描述</th>
            <th nzColumnKey="disabled">状态</th>
            <th nzColumnKey="created"
                [nzSortFn]="true">日期</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of basicTable.data; let i = index">
            <td [nzChecked]="setOfCheckedId.has(data.id)"
                (nzCheckedChange)="handleItemChecked(data.id, $event)"></td>
            <td>{{ data.id }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.username }}</td>
            <td>{{ data.password }}</td>
            <td>{{ data.desc }}</td>
            <td>
                <nz-tag nzColor="success"
                    *ngIf="data.disabled">
                    禁用
                </nz-tag>
                <nz-tag nzColor="error"
                    *ngIf="!data.disabled">
                    启用
                </nz-tag>
            </td>

            <td>{{ data.created | date }}</td>
            <td>
                <a (click)="handleEdit(data.id)">
                    <i nz-icon
                        nzType="edit"></i>
                </a>
                <nz-divider nzType="vertical"></nz-divider>
                <a nz-popconfirm
                    nzPopconfirmTitle="确定删除?"
                    (nzOnConfirm)="delete(data.id)"
                    (nzOnCancel)="cancel()"
                    nzPopconfirmPlacement="topLeft">
                    <i nz-icon
                        nzType="delete"></i>
                </a>
                <nz-divider nzType="vertical"></nz-divider>

                <a *ngIf="!data.disabled"
                    (click)="disable(1,data.id)">
                    禁用
                </a>
                <a *ngIf="data.disabled"
                    (click)="disable(0,data.id)">
                    启用
                </a>

            </td>
        </tr>
    </tbody>
</nz-table>
